<template>
	<div class="banner">
		<van-swipe
			class="my-swipe"
			:autoplay="3000"
			loop
			touchable
			indicator-color="white"
		>
			<van-swipe-item
				><img src="@/assets/imgs/swper2.jpg" alt=""
			/></van-swipe-item>
			<van-swipe-item
				><img src="@/assets/imgs/swper3.jpg" alt=""
			/></van-swipe-item>
		</van-swipe>

		<div class="btn" @click="clickCity">
			<span>北京</span>
			<i class="iconfont icon-xiangxia" />
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	data() {
		return {
			BannerList: [],
		}
	},
	methods: {
		clickCity() {
			this.$router.push('/city')
		},
	},
	mounted() {
		axios
			.get(`/api/gateway?type=2&cityId=110100&k=1005445`, {
				headers: {
					'X-Client-Info':
						'{"a":"3000","ch":"1002","v":"5.2.0","e":"16176183882578247392952321"}',
					'X-Host': 'mall.cfg.common-banner',
				},
			})
			.then((data) => {
				// console.log(data);
				this.bannerArr = data.data.data
			})
	},
}
</script>

<style lang="less" scoped>
.banner {
	position: relative;
}
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	line-height: 150px;
	text-align: center;
	background-color: #39a9ed;
	width: 100%;
	height: 210px;
}
img {
	width: 100%;
	height: 100%;
}
.btn {
	width: 48px;
	height: 30px;
	border-radius: 15px;
	background: rgba(0, 0, 0, 0.2);
	font-size: 13px;
	color: #ffffff;
	padding: 0px 5px;
	position: absolute;
	top: 18px;
	left: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	.iconfont {
		font-size: 10px;
		margin-top: 5px;
		margin-left: 5px;
	}
}
</style>
